<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      #wrapper {
        width: 100%;
        height: 300px;
        border: 1px solid #000;
      }
      .gantt_cell {
        position: absolute;

        width: 200px;
        height: 100px;
        background-color: #f00;
      }
      .gantt_cell_1 {
        left: 0;
        top: 0;
      }
      .gantt_cell_1 {
        left: 0;
        top: 110px;
      }
    </style>
  </head>
  <body style="width: 100vw; height: 100vh">
    <div id="wrapper">
      <div class="gantt_cell gantt_cell_1"></div>
      <div class="gantt_cell gantt_cell_2"></div>
    </div>

    <script src="./static/jquery/jquery.min.js"></script>
    <script>
      $('#wrapper').on('mousedown', '.gantt_cell', function (e) {
        let isDragging = false;
        let startX = e.pageX;
        let currentX = startX;
        const _cell = $(this);

        // 注意：点击也有可能会触发这个事件
        $(document).on('mousemove.drag', function (e) {
          let deltaX = e.pageX - startX;
          if (!isDragging && Math.abs(deltaX) > 0.1) {
            isDragging = true;
          }

          if (isDragging) {
            let moveDistance = e.pageX - currentX;
            currentX = e.pageX;
            console.log('正在横向拖拽', moveDistance);
            if (deltaX < 0) {
              deltaX = 0;
            }
            _cell.css({
              left: `${deltaX}px`,
            });
          }
        });

        $(document).on('mouseup.drag', function (e) {
          $(document).off('mousemove.drag mouseup.drag');

          if (isDragging) {
            console.log('结束横向拖拽');
            // 在这里添加拖拽结束时的逻辑
            // 例如：保存新位置，更新数据等
            let finalDeltaX = e.pageX - startX;
            console.log('总移动距离：', finalDeltaX);
          }

          // 重置状态
          isDragging = false;
        });
      });
    </script>
  </body>
</html>
